<template>
	<view class="class-page">
		<!-- 搜索框 -->
		<van-search v-model="value" shape="round"  placeholder="请输入搜索关键词" />
		<!-- 商品分类列表 -->
		<van-tree-select @click="onclass(activeIndex)"
		  v-model:main-active-index="activeIndex"
		  height="100vh"
		  :items="items"
		  
		>
		  <template #content>
			<view class="good-list" style="display: flex;">
				<view class="class-goods"    v-for="v,k in items[activeIndex].children" >
					<image :src="v.image" mode="" ></image>
					<p>{{v.text}}</p>
				</view>
			</view>
		  </template>
		</van-tree-select>

		
	
	</view>
</template>

<script setup>
import {ref,watch} from 'vue'
import api from '../../lib/request.js'
import {onLoad,onShow,onInit} from '@dcloudio/uni-app';
let list = ref()
const activeId = ref(1);
const items = ref([{
	'text':'全部',
	'id':'',
	'children':''
}]);
const activeIndex = ref(0);
let name = ref('全部')
console.log(items)

function onclass(activeIndex){
	console.log(activeIndex);
}


watch(activeIndex,val=>{
	name.value = items.value[val].text
	api.post(`/findMedicineByName?name=${name.value}`).then(res=>{
		let {data} = res
		let children = []
		for(let k in items.value){
			if(name.value == items.value[k].text){
				let a = {text:'',id:'',image:''}
				for(let x of data){
					if(k.text=='中药'){
						return
					}
					a = {text:x.name,id:x.id,image:x.image,}
					children.push(a)
				}	
					items.value[k].children=children
			}
		}
	})
	
})

//分类
api.get('/findAllClassification').then(res=>{
		for(let k of res.data){
			let a = {text:'',id:'',children:[]}
			a.text=k.classifications
			a.id = k.id
			items.value.push(a)
		}
	})	
onLoad(()=>{
	api.get('/medicine/findAll').then(res=>{
					let {data} = res
					let children = []
					for(let k in items.value){
						if(name.value == items.value[k].text){
							let a = {text:'',id:'',image:''}
							for(let x of data){
								a = {text:x.name,id:x.id,image:x.image,}
								children.push(a)
							}	
							// console.log(items.value[0],);
								items.value[0] = {text:name.value,children}
								// items.value[k].children=children
						}
					}
		})
	// api.post(`/findMedicineByName?name=${name.value}`).then(res=>{
	
	// })
})
</script>

<style >
.class-page{
	height: calc(100vh - 94px);	
	overflow-y: scroll;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }	
  .wrap{
	  width: 100vw;
	  display: flex;
	  justify-content: space-between;
  }
	
	/* 侧边栏 */
	.van-tree-select{
		width: 500rpx;
	}

  /* 商品分类列表 */
 .good-list{
	 width: 600rpx;
	 height: 130rpx;
	 padding: 10px 30rpx;
	  display: flex;
	  flex-wrap: wrap;
	  position: absolute;
  }
  .class-goods{
	  width: 130rpx;
	  height: 130rpx;
	  padding: 10px;
	text-align: center;
	margin-bottom: 100rpx;
	
  }
  .class-goods>image{
	  width: 130rpx;
	  height: 130rpx;
	background-color: #39a9ed;
  }
</style>
